<template>
  <!-- 国际化切换 -->
  <div class="w-min-[56px] h-[32px]">
    <v-menu location="bottom">
      <template v-slot:activator="{ props }">
        <v-btn class="!pl-0 !pr-0" v-bind="props">
          <span class="text-text--primary font-[700] text-[14px] leading-[14px] mr-1">{{ localeInfo?.label
          }}</span>
          <v-icon icon="mdi-menu-down" size="20"></v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item class="!min-h-[auto]" v-for="lang of langList" :key="lang.value" @click="handleChangLang(lang)">
          <v-list-item-title class="cursor-pointer">{{ lang.label }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script lang="ts" setup>
import langList from "@Lang/langList.ts";
import { setup_locale } from "@Lang/index.ts";

import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

import { ref } from "vue";

// const localeInfo = ref(proxy.$i18n.global.localeInfo);
const localeInfo = ref({})

// 修改国际化
function handleChangLang(lang: any) {
  setup_locale(lang.value);
  // localeInfo.value = proxy.$i18n.global.localeInfo;
}
</script>

<style scoped></style>
